<template>
  <el-dialog title="到货单详情" :visible.sync="open" width="80%" append-to-body>
    <el-form ref="form" :model="form" label-width="120px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="采购到货单编号" prop="arrivedCode">
            <el-input v-model="form.arrivedCode" readonly/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="供应商" prop="vendorName">
            <el-input v-model="form.vendorName" readonly/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="状态" prop="status">
            <el-select v-model="form.status" disabled>
              <el-option
                v-for="dict in dict.type.mes_order_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="联系人" prop="contact">
            <el-input v-model="form.contact" placeholder="请输入联系人" readonly/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系人-电话" prop="contactTel">
            <el-input v-model="form.contactTel" placeholder="请输入联系人-电话" readonly/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注" prop="remarks">
        <el-input v-model="form.remarks" type="textarea" readonly/>
      </el-form-item>
      <el-divider content-position="center">采购到货单明细信息</el-divider>
      <el-table border :data="cgPurchaseOrderArrivedLineList" :row-class-name="rowCgPurchaseOrderArrivedLineIndex"
                ref="cgPurchaseOrderArrivedLine">
        <el-table-column label="序号" align="center" prop="index" width="50"/>
        <el-table-column label="采购订单编号" align="center" prop="orderCode" width="150"/>
        <el-table-column label="采购员姓名" align="center" prop="buyer" width="150"/>
        <el-table-column label="物料编号" align="center" prop="itemCode" width="150"/>
        <el-table-column label="物料名称" align="center" prop="itemName" width="150"/>
        <el-table-column label="规格型号" align="center" prop="specification" width="150"/>
        <el-table-column label="单位" align="center" prop="unitOfMeasure" width="150"/>
        <el-table-column label="物料分类名称" align="center" prop="itemTypeName" width="150"/>
        <el-table-column
          v-for="col in columnsConfig"
          :key="col.prop"
          :label="col.label"
          :prop="col.prop"
          :width="col.width"
          :align="col.align"
          v-if="col.show">
        </el-table-column>
        <el-table-column label="客户" align="center" prop="clientName" width="150"/>
        <el-table-column label="到货数量"  align="center" prop="arrivedQuantity" width="100"/>
        <el-table-column label="单价"  align="center" prop="price" width="100"/>
        <el-table-column label="金额"  align="center" prop="amount" width="100">
          <template slot-scope="scope">
            {{ scope.row.arrivedQuantity * scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column label="入库数量"  align="center" prop="rkQuantity" width="100"/>
        <el-table-column label="让步接收数量"  align="center" prop="itemRecptQuantity" width="100"/>
        <el-table-column label="作废数量" align="center" prop="scrapQuantity" width="100"/>
        <el-table-column label="退回数量"  align="center" prop="chargebackQuantity" width="100"/>
        <el-table-column label="是否需要质检" align="center" prop="iqcCheck" width="150">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.iqcCheck"/>
          </template>
        </el-table-column>
        <el-table-column label="质检单号"  align="center" prop="iqcCode" width="150"/>
        <el-table-column label="质检结果"  align="center" prop="checkResult" width="150">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.mes_qc_result" :value="scope.row.checkResult"/>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {getArrived} from "@/api/mes/cg/arrived";
import {getColumnsConfigKey} from "@/api/system/columnsconfig";
export default {
  name: "infoView",
  dicts: ['sys_yes_no', 'mes_order_status', 'mes_qc_result'],
  data() {
    return {
      open: false,
      // 表单参数
      form: {},
      // 采购管理-采购到货单明细表格数据
      cgPurchaseOrderArrivedLineList: [],
      columnsConfig:[],
    };
  },
  created() {
    this.getItemBase();
  },
  methods: {
    init(id) {
      getArrived(id).then(response => {
        this.form = response.data;
        this.cgPurchaseOrderArrivedLineList = response.data.cgPurchaseOrderArrivedLineList;
        this.open = true;
      });
    },
    getItemBase(){
      getColumnsConfigKey('MdItem_Base').then(res=>{
        this.columnsConfig = JSON.parse(res.data);
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    /** 采购管理-采购到货单明细序号 */
    rowCgPurchaseOrderArrivedLineIndex({row, rowIndex}) {
      row.index = rowIndex + 1;
    },
  }
};
</script>
